<template>
  <div
    v-if="show"
    class="fixed w-full h-full bg-mask-5 left-0 top-0 flex items-center justify-center"
  >
    <div
      class="relative w-266px h-360px bg-main rounded-16px flex flex-col items-center"
      style="border: 6px solid #fff"
    >
      <div class="w-255px h-243px rounded-10px relative ml-1px">
        <img
          :src="JSON.parse(list.daily?.poster || '[]')?.url"
          alt=""
          class="w-256px h-243px rounded-10px"
        />
        <div
          class="absolute w-232px h-62px flex items-center justify-center bg-mask-white-3 left-14px top-90px text-48px font-bold word-stroke text-white tracking-wider"
        >
          <span v-for="name in list.daily?.name?.split('')" :key="name">{{ name }}</span>
        </div>
      </div>
      <div
        class="relative w-193px h-34px bg-main rounded-6px mt-14px"
        style="border: 2px solid #fff"
      >
        <div class="w-73px h-30px bg-white absolute left-0 top-0"></div>
        <div
          class="absolute w-123px h-34px left-73px -top-2px text-14px text-white leading-34px text-center tracking-wider"
        >
          {{ list.daily?.description }}
        </div>
      </div>
      <div class="flex items-center mt-8px">
        <img :src="DailyModal01" alt="" class="mr-14px" />
        <img :src="DailyModal02" alt="" class="mr-14px" />
        <img :src="DailyModal03" alt="" class="mr-14px" />
        <img :src="DailyModal04" alt="" class="mr-14px" />
        <img :src="DailyModal05" alt="" />
      </div>
      <div
        class="absolute w-144px h-32px rounded-22px text-white text-center leading-30px -bottom-19px cursor-pointer"
        style="
          background: linear-gradient(180deg, #4979ff 45.83%, #0a37b5 100%);
          border: 2px solid #fff;
        "
        @click="buy"
      >
        立即抢购 >
      </div>
      <div class="absolute -top-24px -right-24px z-3 cursor-pointer" @click="close">
        <img :src="CloseLoginIcon" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useListStore } from '@renderer/store/modules/list'
import DailyModal01 from '@renderer/assets/dailyModal_01.svg'
import DailyModal02 from '@renderer/assets/dailyModal_02.svg'
import DailyModal03 from '@renderer/assets/dailyModal_03.svg'
import DailyModal04 from '@renderer/assets/dailyModal_04.svg'
import DailyModal05 from '@renderer/assets/dailyModal_05.svg'
import { computed } from 'vue'
import CloseLoginIcon from '@renderer/assets/closeLogin.svg'

const props = defineProps({
  value: {
    type: Boolean,
    default: () => false
  }
})
const show = computed({
  get: () => props.value,
  set: (v) => {
    emits('update:value', v)
  }
})
const emits = defineEmits(['update:value', 'on:buy'])
const list = useListStore()

const close = () => {
  emits('update:value')
}

const buy = () => {
  emits('on:buy')
}
</script>

<style scoped>
.word-stroke span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #4979ff;
}
</style>
